<span class="pull-right">
  <button class="layui-btn add" onclick="add('category_add.html','添加栏目')">
    <i class="layui-icon">&#xe608;</i> 栏目添加
  </button>
</span>
<table class="layui-table">
  <colgroup>
    <col width="30px">
    <col>
    <col>
    <col>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th class="qzk" state="1">
        <i class="layui-icon">&#xe625;</i>
      </th>
      <th>栏目名称</th>
      <th>导航</th>
      <th>排序</th>
      <th>操作</th>
    </tr> 
  </thead>
  <tbody>
  {volist name="list" id="vo"}
    {if condition="$vo.fid == 0"}
      <tr>
        <td class="zk" data="{$vo.id}" state="1">
          <i class="layui-icon">&#xe625;</i>
        </td>
        <td>{$vo.catename}</td>
        <td>
          <button class="layui-btn layui-btn-primary layui-btn-small" onclick="state('category_update_show.html',{$vo.id},{show: {$vo.show}})">
            {if condition="$vo.show == 1"}
              <font style="color: blue">显示</font>
            {else/}
              <font style="color: red">不显示</font>
            {/if}
          </button> 
        </td>
        <td>{$vo.order}</td>
        <td>
          <div class="layui-btn-group">
            <button class="layui-btn layui-btn-primary layui-btn-small" onclick="edit('category_edit.html',{$vo.id},'栏目修改')">
              <i class="layui-icon">&#xe642;</i>
            </button>
            <button class="layui-btn layui-btn-primary layui-btn-small" onclick="del('category_del.html',{$vo.id})">
              <i class="layui-icon" style="color: red">&#xe640;</i>
            </button>            
          </div>
        </td>
      </tr>    
    {/if}
    {volist name="list" id="v"}
      {if condition="$v.fid == $vo.id"}
        <tr data="{$vo.id}">
          <td><font style="color: #F7B824">┗ </font></td>
          <td>{$v.catename}</td>
          <td>
            <button class="layui-btn layui-btn-primary layui-btn-small" onclick="state('category_update_show.html',{$v.id},{show: {$v.show}})">
              {if condition="$v.show == 1"}
                <font style="color: blue">显示</font>
              {else/}
                <font style="color: red">不显示</font>
              {/if}
            </button> 
          </td>
          <td>{$v.order}</td>
          <td>
            <div class="layui-btn-group">
              <button class="layui-btn layui-btn-primary layui-btn-small" onclick="edit('category_edit.html',{$v.id},'栏目修改')">
                <i class="layui-icon">&#xe642;</i>
              </button>
              <button class="layui-btn layui-btn-primary layui-btn-small" onclick="del('category_del.html',{$v.id})">
                <i class="layui-icon" style="color: red">&#xe640;</i>
              </button>            
            </div>
          </td>
        </tr>    
      {/if}
    {/volist}
  {/volist}
  </tbody>
</table>
<script>
$(function(){

  // 全部展开按钮
  $('.qzk').off('click').on('click',function(){
    if($(this).attr('state') == 1){
      $(this).find('i').html('&#xe623;');
      $(this).attr('state',0);
    }else{
      $(this).find('i').html('&#xe625;');
      $(this).attr('state',1);
    } 
    $('.zk').click();
  });

  // 展开按钮
  $('.zk').off('click').on('click',function(){
    let id = $(this).attr('data');
    if($('tr[data='+id+']').css("display") == 'none'){
      $('tr[data='+id+']').show();
      $(this).find('i').html('&#xe625;');
    }else if($('tr[data='+id+']').length === 0){
      if($(this).attr('state') == 1){
        $(this).find('i').html('&#xe623;');
        $(this).attr('state',0);
      }else{
        $(this).find('i').html('&#xe625;');
        $(this).attr('state',1);
      }  
    }else{
      $('tr[data='+id+']').hide();
      $(this).find('i').html('&#xe623;');
    }  
  })
  
});
</script>
